<template>
  <view class="bg-white min-h-screen flex flex-col">
    <!-- 顶部 Logo -->
    <view class="flex-1 flex flex-col items-center justify-center px-6">
      <view class="w-24 h-24 rounded-full bg-primary flex items-center justify-center mb-8">
        <text class="text-white text-4xl font-bold">U</text>
      </view>
      
      <view class="w-full max-w-md">
        <text class="text-2xl font-bold text-center block mb-8">用户注册</text>
        
        <!-- 注册表单 -->
        <form @submit.prevent="handleRegister">
          <view class="mb-4">
            <label class="block text-gray-700 text-sm font-medium mb-2">用户名</label>
            <input 
              type="text" 
              v-model="form.username" 
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50"
              placeholder="请输入用户名"
            />
            <text class="text-red-500 text-xs mt-1 block" v-if="errors.username">{{ errors.username }}</text>
          </view>
          
          <view class="mb-4">
            <label class="block text-gray-700 text-sm font-medium mb-2">手机号</label>
            <input 
              type="tel" 
              v-model="form.phone" 
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50"
              placeholder="请输入手机号"
            />
            <text class="text-red-500 text-xs mt-1 block" v-if="errors.phone">{{ errors.phone }}</text>
          </view>
          
          <view class="mb-4">
            <label class="block text-gray-700 text-sm font-medium mb-2">验证码</label>
            <view class="flex">
              <input 
                type="text" 
                v-model="form.code" 
                class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-primary/50"
                placeholder="请输入验证码"
              />
              <button 
                type="button" 
                @click="sendCode" 
                class="bg-primary/10 text-primary px-4 py-2 rounded-r-md text-sm font-medium"
                :disabled="countdown > 0"
              >
                {{ countdown > 0 ? `${countdown}s后重新发送` : '获取验证码' }}
              </button>
            </view>
            <text class="text-red-500 text-xs mt-1 block" v-if="errors.code">{{ errors.code }}</text>
          </view>
          
          <view class="mb-4">
            <label class="block text-gray-700 text-sm font-medium mb-2">密码</label>
            <input 
              type="password" 
              v-model="form.password" 
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50"
              placeholder="请输入密码"
            />
            <text class="text-red-500 text-xs mt-1 block" v-if="errors.password">{{ errors.password }}</text>
          </view>
          
          <view class="mb-6">
            <label class="block text-gray-700 text-sm font-medium mb-2">确认密码</label>
            <input 
              type="password" 
              v-model="form.confirmPassword" 
              class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50"
              placeholder="请再次输入密码"
            />
            <text class="text-red-500 text-xs mt-1 block" v-if="errors.confirmPassword">{{ errors.confirmPassword }}</text>
          </view>
          
          <button 
            type="submit" 
            class="w-full bg-primary text-white py-3 rounded-md font-medium transition-all duration-300 hover:bg-primary/90 active:scale-95"
          >
            注册
          </button>
        </form>
        
        <!-- 底部操作 -->
        <view class="flex justify-center mt-6">
          <text class="text-gray-600 text-sm">已有账号?</text>
          <navigator url="/pages/login/index" class="text-primary text-sm font-medium ml-2 hover:underline">
            立即登录
          </navigator>
        </view>
      </view>
    </view>
    
    <!-- 底部信息 -->
    <view class="pb-8 px-6 text-center text-gray-500 text-xs">
      <text>点击注册即表示您同意我们的</text>
      <navigator url="/pages/terms/index" class="text-primary hover:underline">用户协议</navigator>
      <text>和</text>
      <navigator url="/pages/privacy/index" class="text-primary hover:underline">隐私政策</navigator>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onUnmounted } from 'vue'
import { useRouter } from 'uni-mini-router'

const router = useRouter()

// 表单数据
const form = reactive({
  username: '',
  phone: '',
  code: '',
  password: '',
  confirmPassword: ''
})

// 错误信息
const errors = reactive({
  username: '',
  phone: '',
  code: '',
  password: '',
  confirmPassword: ''
})

// 倒计时
const countdown = ref(0)
let timer = null

// 发送验证码
const sendCode = () => {
  // 验证手机号
  if (!form.phone) {
    errors.phone = '请输入手机号'
    return
  }
  
  const phoneReg = /^1[3-9]\d{9}$/
  if (!phoneReg.test(form.phone)) {
    errors.phone = '请输入有效的手机号'
    return
  }
  
  errors.phone = ''
  
  // 开始倒计时
  countdown.value = 60
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
  
  // 模拟发送验证码
  uni.showToast({
    title: '验证码已发送',
    icon: 'none'
  })
}

// 注册处理
const handleRegister = () => {
  // 表单验证
  let isValid = true
  
  if (!form.username) {
    errors.username = '请输入用户名'
    isValid = false
  } else {
    errors.username = ''
  }
  
  if (!form.phone) {
    errors.phone = '请输入手机号'
    isValid = false
  } else {
    const phoneReg = /^1[3-9]\d{9}$/
    if (!phoneReg.test(form.phone)) {
      errors.phone = '请输入有效的手机号'
      isValid = false
    } else {
      errors.phone = ''
    }
  }
  
  if (!form.code) {
    errors.code = '请输入验证码'
    isValid = false
  } else if (form.code.length !== 6) {
    errors.code = '验证码长度为6位'
    isValid = false
  } else {
    errors.code = ''
  }
  
  if (!form.password) {
    errors.password = '请输入密码'
    isValid = false
  } else if (form.password.length < 6) {
    errors.password = '密码长度至少6位'
    isValid = false
  } else {
    errors.password = ''
  }
  
  if (!form.confirmPassword) {
    errors.confirmPassword = '请确认密码'
    isValid = false
  } else if (form.confirmPassword !== form.password) {
    errors.confirmPassword = '两次输入的密码不一致'
    isValid = false
  } else {
    errors.confirmPassword = ''
  }
  
  if (!isValid) return
  
  // 模拟注册请求
  uni.showLoading({
    title: '注册中...',
    mask: true
  })
  
  setTimeout(() => {
    uni.hideLoading()
    
    // 注册成功
    uni.showToast({
      title: '注册成功',
      icon: 'success'
    })
    
    // 存储用户信息
    uni.setStorageSync('user', {
      username: form.username,
      phone: form.phone,
      token: 'mock_token_' + Math.random().toString(36).substr(2)
    })
    
    // 延迟后跳转到登录页
    setTimeout(() => {
      router.push({ name: 'login' })
    }, 1500)
  }, 1500)
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped>
:root {
  --primary: #165DFF;
}
</style>    